<template>
	<div id="pay">
		<div class="head">
			<p>确认订单</p>
		</div>
		<div class="contentBox">
			<div class="contentHead">
				<div class="name-phone">
					<p class="name">收货人：关山月</p>
					<p class="phone">12345678910</p>
				</div>
				<div class="city-edit">
					<div class="city">收货地址：广州市荔湾区西关大道999号</div>
					<div class="imgright"></div>
				</div>
			</div>
			<div class="goods">
				<ul class="goodsList">
					<li v-for="item in goodsList" :key="item.id">
						<img :src="item.imgpath"/>
						<div class="right">
							<p class="name">{{item.name}}</p>
							<p class="colorOrweight">{{item.colorOrweight}}</p>
							<p class="aftersales">{{item.aftersales}}</p>
							<div class="price-count">
								<p class="price">{{item.price}}</p>
								<p class="count">{{item.count}}</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="message">
				<div class="discountBox">
					<span class="discount">优惠</span>
					<span class="quan">五品小主券</span>
					<span class="discountImg"></span>
				</div>
				<div class="giveBox">
					<span class="give">配送方式</span>
					<span class="freeGive">快递免运费</span>
				</div>
				<div class="leaveWordBox">
					<span class="leaveWord">买家留言</span>
					<input type="text" value="留言前建议协商（50字内）"/>
				</div>
			</div>
			<div class="allPriceBox">
				<div class="commodityPrice">
					<span class="text">商品金额</span>
					<span class="price">¥1326.00</span>
				</div>
				<div class="freight">
					<span class="text2">运费</span>
					<span class="price">免运费</span>
				</div>
				<div class="total">
					<span class="text3">合计</span>
					<span class="allPrice">¥1326.00</span>
				</div>
			</div>
		</div>
		<div class="submit">
			<span class="total">合计:</span>
			<span class="totalPrice">¥1326</span>
			<input type="button" value="提交订单"/>
		</div>
	</div>
</template>

<script>
	export default{
		name:"pay",
		data(){
			return{
				goodsList:[
					{
						id:'1',
						imgpath:require('../../../assets/img/kouhong.png'),
						name:'故宫口红•枫叶红',
						colorOrweight:'枫叶红',
						aftersales:'7天无理由退换',
						price:'¥199.00',
						count:'x1'
					},
					{
						id:'2',
						imgpath:require('../../../assets/img/kouhong.png'),
						name:'福在眼前•吊坠（两用）',
						colorOrweight:'4.7g',
						aftersales:'7天无理由退换',
						price:'¥1127.00',
						count:'x1'
					}
				]
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.bg {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.allPriceText{
		font-size: 0.14rem;
		color: #333333;
		opacity: 1;
	}
	#pay{
		background: #F5F5F5;
		padding-bottom: 0.6rem;
		.head{
			height: 0.88rem;
			background: #C30D23;
			opacity: 1;
			position: relative;
			p{
				font-size: 0.20rem;
				font-weight: bold;
				color: #FFFCFC;
				position: absolute;
				top: 0.5rem;
				left: 1.48rem;
			}
			
		}
		
		.contentBox{
			.contentHead{
				background: #FFFCFC;
				padding-top: 0.12rem;
				padding-bottom: 0.16rem;
				.name-phone{
					display: flex;
					margin-left: 0.20rem;
					.name{
						font-size: 0.14rem;
						font-weight: bold;
						color: #333333;
						opacity: 1;
					}
					.phone{
						font-size: 12px;
						font-weight: bold;
						color: #333333;
						opacity: 1;
						margin-left: 1.58rem;
					}
				}
				.city-edit{
					display: flex;
					margin: 0.09rem 0 0 0.2rem;
					.city{
						font-size: 0.12rem;
						color: #333333;
						opacity: 1;
					}
					.imgright{
						display: inline-block;
						width: 0.2rem;
						height: 0.2rem;
						background-image: url(../../../assets/img/right-icon.png);
						.bg();
						margin-left: 1.02rem;
					}
				}
			}
			.goods{
				background: #FFFCFC;
				margin-top: 0.12rem;
				.goodsList{
					margin-left: 0.2rem;
					padding-top: 0.16rem;
					padding-bottom:0.08rem ;
					li{
						display: flex;
						margin-bottom:0.12rem;
						img{
							width: 0.88rem;
							height: 0.88rem;
						}
						.right{
							display: flex;
							flex-direction: column;
							margin-left: 0.16rem;
							.name{
								font-size: 0.14rem;
								font-weight: bold;
								color: #333333;
								opacity: 1;
							}
							.colorOrweight{
								font-size: 0.12rem;
								color: #333333;
								opacity: 1;
								margin-top: 0.08rem;
							}
							.aftersales{
								display: inline-block;
								width: 0.8rem;
								height: 0.17rem;
								line-height: 0.17rem;
								font-size: 0.08rem;
								color: #C91328;
								text-align: center;
								opacity: 1;
								background: #FFE0E4;
								margin: 0.04rem 0;
							}
							.price-count{
								display: flex;
								.price{
									font-size: 0.14rem;
									font-weight: bold;
									color: #C30D23;
									opacity: 1;
								}
								.count{
									font-size: 0.14rem;
									color: #333333;
									opacity: 1;
									margin-left: 1.56rem;
								}
							}
						}
					}
				}
			}
			.message{
				background: #FFFCFC;
				margin-top: 0.12rem;
				padding: 0.21rem 0 0.2rem 0;
				.discountBox{
					// margin: 0.21rem 0 0 0.2rem;
					// padding: ;
					margin-left: 0.2rem;
					display: flex;
					.discount{
						font-size: 0.14rem;
						color: #333333;
						opacity: 1;
					}
					.quan{
						font-size: 0.12rem;
						color: #C30D23;
						opacity: 1;
						margin-left: 2.3rem;
					}
					.discountImg{
						display: inline-block;
						width: 0.2rem;
						height: 0.2rem;
						background-image: url(../../../assets/img/right-icon.png);
						.bg();
					}
				}
				.giveBox{
					display: flex;
					margin: 0.14rem 0 0.14rem 0.2rem;
					.give{
						font-size: 0.14rem;
						color: #333333;
						opacity: 1;
					}
					.freeGive{
						margin-left: 2.19rem;
						font-size: 0.12rem;
						color: #333333;
						opacity: 1;
					}
				}
				.leaveWordBox{
					display: flex;
					margin-left: 0.2rem;
					.leaveWord{
						font-size: 0.14rem;
						color: #333333;
						opacity: 1;
					}
					input{
						background-color: #FFFCFC;
						border: none;
						font-size: 0.12rem;
						color: #999999;
						opacity: 1;
						margin-left: 0.16rem;
					}
				}
			}
			.allPriceBox{
				background: #FFFCFC;
				margin-top: 0.12rem;
				padding: 0.2rem 0 0.34rem 0;
				.commodityPrice{
					display: flex;
					margin-left: 0.2rem;
					.text{
						.allPriceText();
					}
					.price{
						font-size: 0.14rem;
						font-weight: bold;
						color: #C30D23;
						opacity: 1;
						margin-left: 2.16rem;
					}
				}
				.freight{
					display: flex;
					margin: 0.14rem 0 0.14rem  0.2rem;
					.text2{
						.allPriceText();
					}
					.price{
						.allPriceText();
						margin-left: 2.71rem;
					}
				}
				.total{
					display: flex;
					margin-left: 0.2rem;
					.text3{
						.allPriceText();
					}
					.allPrice{
						font-size: 0.14rem;
						font-weight: bold;
						color: #C30D23;
						opacity: 1;
						margin-left: 2.44rem;
					}
				}
			}
		}
	
		.submit{
			display: flex;
			background: #FFFFFF;
			position: fixed;
			height: 0.44rem;
			bottom: 0.41rem;
			.total{
				font-size: 0.14rem;
				color: #333333;
				opacity: 1;
				margin: 0.12rem 0 0 1.7rem;
			}
			.totalPrice{
				font-size: 0.18rem;
				color: #C30D23;
				opacity: 1;
				margin: 0.09rem 0 0 0.06rem;
			}
			input{
				border: none;
				width: 0.94rem;
				height: 0.44rem;
				background: #C30D23;
				opacity: 1;
				font-size: 0.14rem;
				color: #FFFCFC;
				margin-left: 0.16rem;
			}
		}
	}
</style>
